﻿// JavaScript Document
//copyright c by zhangxinxu 2009-10-17 
//http://www.zhangxinxu.com
/*由于大图绑定在href属性中，故一般而言，需使用a标签的href指向大图。仅支持png,gif,jpg,bmp四种格式的图片。用法是：目标.preview();
例如：<a href="xx.jpg">图片</a>
$("a").preview();就可以了
*/
(function ($) {
    $.fn.preview = function () {
        var xOffset = 10;
        var yOffset = 20;
        var w = $(window).width();
        $(this).each(function () {
            $(this).hover(function (e) {
                var size = $(this).attr("newSize").split("x");
                if (/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("src"))) {
                    $("body").append("<div id='preview'><div><img style='width:" + size[0] + "px;height:" + size[1] + "px;' src='" + $(this).attr('src') + "' /><p>" + $(this).attr("newSize") + "</p><p>" + $(this).attr('title') + "</p></div></div>");
                }
                $("#preview").css({
                    position: "absolute",
                    padding: "4px",
                    border: "1px solid #f3f3f3",
                    backgroundColor: "#eeeeee",
                    top: (e.pageY - yOffset) + "px",
                    zIndex: 1000
                });
                $("#preview > div").css({
                    padding: "5px",
                    backgroundColor: "white",
                    border: "1px solid #cccccc"
                });
                $("#preview > div > p").css({
                    textAlign: "center",
                    fontSize: "12px",
                    padding: "8px 0 3px",
                    margin: "0"
                });
                if (e.pageX < w / 2) {
                    $("#preview").css({
                        left: e.pageX + xOffset + "px",
                        right: "auto"
                    }).fadeIn("fast");
                } else {
                    $("#preview").css("right", (w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");
                }
            }, function () {
                $("#preview").remove();
            }).mousemove(function (e) {
                $("#preview").css("top", (e.pageY - xOffset) + "px")
                if (e.pageX < w / 2) {
                    $("#preview").css("left", (e.pageX + yOffset) + "px").css("right", "auto");
                } else {
                    $("#preview").css("right", (w - e.pageX + yOffset) + "px").css("left", "auto");
                }
            });
        });
    };
})(jQuery);
